// @ts-nocheck==
import { reactive, ref, onMounted, onBeforeMount, watch, nextTick, onUnmounted, onBeforeUnmount } from "vue"
import { useRoute } from "vue-router"
import { useDebounceFn } from "@vueuse/core"
import * as util from "@/utils"
import * as 插组件util from "amtf/api/插组件util"
import { ElMessage, ElMessageBox } from "element-plus"
import useApi from "@/api/use增查api"
import { useRouter } from "vue-router"
import use路由 from "@/hooks/use路由"
// import { use提示 } from "@/hooks/use提示"
import { use快捷键 } from "amtf/hooks/use快捷键"
// import use插组件 from "@/hooks/use插组件"
import use缓存 from "@/hooks/use缓存"
import use筛选 from '@/hooks/use筛选';
// import use取选项集 from '@/取候选值集';
export default function (cfg: cfg = {}, 插组件: 插组件) {
    // console.log(`uselist执行 ing👇`)
    // const 插组件 = use插组件({ 组件id: cfg.关联组件id })
    // 插组件.取组件()
    const { 插件id, 组件id } = 插组件.a
    // const { 组件 } = 插组件
    // // console.log(`组件 👉`, 组件)
    const api = useApi(插组件.api路径)
    const router = useRouter()

    // console.log(`cfg 👉`, cfg)
    const 单项组 = reactive<单项组>([])
    const 搜索ref = ref()
    // 如果把ref嵌套到对象中，调用时无法作为ref使用
    const 表ref = ref<any>(null)
    const 单项ref = ref("")
    const a = reactive({
        变化了: false,
        编辑否: false,
        showAllQuery: false,
        展开行s: [],
        筛选组: [],
        默认排序: { prop: 'UpdatedAt', order: 'descending' },
        // 默认排序: {},
        选中组: [],
        // 候选值集: 插组件.a.候选值集,
        可选页面容量: [5, 10, 30, 50, 100],
        total: 1,
    })
    if (cfg.a) Object.assign(a, cfg.a)

    // 查询参数👇
    const req = reactive({
        筛选组: [],
        // 多字段搜索字段名s: ["姓名", "部门.名称"],
        多字段搜索字段名s: [],
        多字段搜索关键词: "",
        page: 1,
        pageSize: 10,
        searchInfo: {},
        树结构: false,
        sort: a.默认排序.prop,
        order: a.默认排序.order,
    } as any)
    if (cfg.req) Object.assign(req, cfg.req)
    if (插组件.组件.多字段搜索字段名s) {
        console.log(`插组件.组件.多字段搜索字段名s 👉`, 插组件.组件.多字段搜索字段名s)
        req.多字段搜索字段名s.push(...插组件.组件.多字段搜索字段名s)
        console.log(`req.多字段搜索字段名s 👉`, req.多字段搜索字段名s)
    }

    const 增 = async () => {
        let 单项模板 = 插组件.取组件单项模板()
        util.合并设置(cfg, 单项模板, "单项模板")
        console.log(`单项组 👉`, 单项组)
        单项组.unshift(单项模板)
        console.log(`单项组 👉`, 单项组)
        a.编辑否 = true
        // 表ref.value.columns
        await nextTick();
        const el = 表ref.value.$el
        console.log(`el 👉`, el)
        const bodyWrapper = el.querySelector('.el-table__body-wrapper');
        if (bodyWrapper) {
            const firstTr = bodyWrapper.querySelector('tr');
            // console.log(`firstTr 👉`,firstTr)
            if (firstTr) {
                // 找到第二个 td 元素
                const secondTd = firstTr.children[1];
                if (secondTd) {
                    const input = secondTd.querySelector('input');
                    if (input) {
                        input.focus();
                    }
                }
            }
        }
    }

    const 保存 = async () => {
        if (!a.变化了) return
        if (cfg.保存前) {
            if (!cfg.保存前(单项组)) return
        }
        const 变动单项组 = 插组件util.取变动单项组(源单项组, 单项组)
        // console.log(`变动单项组 👉`, 变动单项组)
        const res = await api.改(变动单项组)
        if (res.code == 0) {
            util.提示()
            初始化()
        }
    }

    const 删 = async (row = null) => {
        ElMessageBox.confirm("确定要删除吗?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
        })
            .then(async () => {
                if (row) {
                    await 删单个(row)
                } else {
                    await 删多个()
                }
                util.播音("删除")
                查多个()
            })
            .catch(() => { })
    }

    const 删多个 = async () => {
        // console.log(`删多个 ing👇`)
        const ids = []
        a.选中组 &&
            a.选中组.map(item => {
                ids.push(item.id)
            })
        const res = await api.删({ ids })
        if (res.code === 0) {
            ElMessage({
                type: "success",
                message: "删除成功",
            })
            // 如果是删除一整页，要换页码
            if (单项组.length === ids.length && req.page > 1) {
                req.page--
            }
        }
    }

    const 删单个 = async row => {
        // console.log(`删单个 row 👉`, row)
        const res = await api.删({ id: row.id })
        if (res.code === 0) {
            ElMessage({
                type: "success",
                message: "删除成功",
            })
            if (单项组.length === 1 && req.page > 1) {
                req.page--
            }
        }
    }

    let 源单项组: 单项组
    const 查多个 = async () => {
        // console.log(`查多个 开始 ing👇`)
        // a.变化了 = false
        // 监听变化 = false
        const req2 = { ...req, 筛选组: JSON.stringify(req.筛选组) }
        const res = await api.查(req2)
        console.log(`查多个 res 👉`, res)
        if (res.code === 0) {
            源单项组 = util.深拷贝(res.data.list)
            // console.log(`查多个 单项组 👉`, 单项组)
            // console.log(`req.树结构 👉`, req.树结构)
            if (req.树结构) {
                let 添加顶层 = util.深拷贝(res.data.list[0])
                添加顶层.id = 0
                添加顶层[插组件.组件.树结构?.label!] = "全部"
                添加顶层.children = res.data.list
                res.data.list = [添加顶层]
            }
            util.数组重予(单项组, res.data.list)
            a.total = res.data.total
            // req.page = res.data.page
            // req.pageSize = res.data.pageSize
            await nextTick();
            // console.log(`查多个后渲染 完成 ing👇`)
            a.变化了 = false
            // 监听变化 = true
        }
    }

    const 查单个 = async () => {
        const res = await api.查({ id: row.id })
        if (res.code === 0) {
            单项.value = res.data
        }
    }

    const 选中变了 = val => {
        a.选中组 = val
    }
    const 改单页条数 = val => {
        req.pageSize = val
        // 查多个()
    }
    const 重置 = () => {
        req.searchInfo = {}
        // 查多个()
    }
    const sortChange = ({ prop, order }) => {
        const sortMap = {
            UpdatedAt: "UpdatedAt",
        }
        let sort = sortMap[prop]
        if (!sort) {
            sort = prop.replace(/[A-Z]/g, match => `_${match.toLowerCase()}`)
        }
        req.searchInfo.sort = sort
        req.searchInfo.order = order
        // 查多个()
    }
    const 跳转页面 = val => {
        req.page = val
        // 查多个()
    }
    const 查询 = () => {
        搜索ref.value?.validate(async valid => {
            if (!valid) return
            req.page = 1
            req.pageSize = 10
            // 查多个()
        })
    }
    watch(req, (newValue, oldValue) => {
        // console.log(`req 变化了 👉`, req)
        // if (监听变化) {
        查多个()
        // }
        // 监听变化 = true
    })

    const 路由 = use路由()
    function 视图切换() {
        if (路由.a.页面类型 == "列表") {
            router.push({ name: "项目管理.项目信息.看板" })
        } else {
            router.push({ name: "项目管理.项目信息.list" })
        }
        return true
    }

    let 关联list = null

    function 初始化() {
        console.log(`list 初始化 开始 ing👇`)
        // console.log(`取消监听 ing👇`)
        // a.变化了 = false
        // 监听变化 = false
        a.编辑否 = false
        查多个()
        插组件.取候选值集()
        if (表ref.value) {
            单项组.forEach((row) => {
                表ref.value.toggleRowExpansion(row, false);
            });
        }
        a.变化了 = false
    }
    初始化()

    watch(单项组, (newValue, oldValue) => {
        // console.log(`newValue 👉`, newValue)
        // console.log(`oldValue 👉`,oldValue)
        console.log(`单项组变化 ing👇`)
        // console.log(`监听变化 👉`, 监听变化)
        // if (监听变化) {
        a.变化了 = true
        // }
        // 监听变化 = true
        // 成单项树()
    })

    const 快捷键cfg: 快捷键cfg = {
        ctrl_s: event => {
            // console.log(`uselist 快捷键cfg ing👇`)
            event.preventDefault()
            event.stopImmediatePropagation();
            保存()
        },
    }
    const 快捷键 = use快捷键(快捷键cfg)

    const 缓存 = use缓存({ ...插组件.a })
    function 列宽拖动(newWidth: number, oldWidth: number, column: any, event: MouseEvent) {
        console.log(`表ref 👉`, 表ref)
        const 列s = 表ref.value.columns as any[]
        缓存.存列宽(列s)
        // 单项组.forEach((row) => {
        //     表ref.value.toggleRowExpansion(row,false);
        // });
    }

    function 展开行变化(row: any, expandedRows: any[]) {
        // console.log(`展开行变化 row 👉`, row)
        // console.log(`展开行变化 expandedRows 👉`, expandedRows)
    }

    const 筛选 = use筛选({ 数据单项组: 单项组, 插组件, 筛选组: req.筛选组 })

    // onBeforeUnmount(() => {
    //     const 列s = 表ref.value.columns as any[]
    //     缓存.存列宽(列s)
    // })

    return {
        展开行变化,
        缓存,
        表ref,
        列宽拖动,
        保存,
        增,
        关联list,
        初始化,
        视图切换,
        req,
        插件id,
        组件id,
        插组件,
        筛选,
        // 取字段显示值,
        // 取候选值集,
        重置,
        跳转页面,
        改单页条数,
        sortChange,
        查询,
        选中变了,
        搜索ref,
        删,
        查单个,
        单项ref,
        a,
        单项组,
        查多个,
    }
}
